<template>
  <div class="Indicator-wrapper">
    <el-badge
      v-for="num in randomSize"
      :key="num"
      :value="num < 10 ? '0' + num : num"
      class="item"
      :type="num == index + 1 ? 'primary' : 'info'"
      @click.native="gotoIndex(num - 1)"
    >
    </el-badge>
  </div>
</template>

<script>
// import {fill0} from '@/utils/index';
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {};
  },
  methods: {
    ...mapMutations("study", ["SET_INDEX"]),
    gotoIndex(index) {
      this.SET_INDEX(index)
    },
  },
  computed: {
    ...mapState("study", ["index", "randomSize"]),
  },
};
</script>

<style scoped>
.el-badge {
  cursor: pointer;
}
/* ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  width: 250px;
}

li {
  background: #666;
  color: #ffff;
  border-radius: 50px;
  font-size: 12px;
  width: 20px;
  text-align: center;
  margin-right: 5px;
  margin-top: 5px;
}

.Indicator-wrapper ul li.current {
  background: rgb(102, 102, 218);
}

.Indicator-wrapper ul li.right {
 background: rgb(90, 247, 90);
}

.Indicator-wrapper ul li.wrong {
  background: rgb(235, 91, 91);
} */
</style>